June 18, 2021
๋ด๊ฐ ๋ง๋ค๋ ค๋ ํ๋ฉด์ ์ฌ์ง๊ณผ ๊ฐ์ด input ์ฐฝ์ ์ ๋๋ ํ ๋ฆฌ๋ช ์ ์ ๋ ฅํ๊ณ ์ ์ฅ๋ฒํผ์ ๋๋ฅด๋ฉด ์นด๋ ์์ ๋ ์๋ ํ๋ฉด์ด ์ฌ๋ผ์ง๊ณ ์ ์ฅํ๋ฉด์ด ๋์ค๋ ๊ฒ์ด์๋ค. ํ์ง๋ง ์ ์ฅ๋ฒํผ์ ๋๋ฅด๊ณ ์นด๋ ์์ ๋ ์๋ ํ๋ฉด์ ์ฌ๋ผ์ก์ง๋ง ์ ์ฅํ๋ฉด์ด ๋์ค์ง ์์๋ค. ๊ทธ ์ด์ ๋ ๋ฐ๋ก input์ฐฝ์ focus๊ฐ ๊บผ์ง๋ฉด ์นด๋ ์์ ๋ ์๋ ํ๋ฉด์ด ์ฌ๋ผ์ง๋๋ก ๋ง๋ค์ด๋จ๋๋ฐ ๊ทธ ์ด๋ฒคํธ๊ฐ ์ ์ฅ๋ฒํผ์ ๋๋ ์ ๋ ์คํ๋๋ ์ด๋ฒคํธ๋ณด๋ค ๋จผ์ ์ผ์ด๋์ ์ ์ฅ์ด ์ผ์ด๋์ง ์๊ณ ๋ฐ๋ก ํ๋ฉด์ด ๊บผ์ ธ๋ฒ๋ฆฐ ๊ฒ์ด์๋ค.
๊ทธ๋์ ์ฝ๋๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ ํ๋ค.
<ButtonWrap isShow={isShow} inputChange={inputChange}>
<input
className="addInput"
placeholder="์ ๋๋ ํ ๋ฆฌ ๋ช
์ ์
๋ ฅํ์ธ์"
onChange={e => {
inputText.onChange(e)
setInputChange(true)
}}
onFocus={e => {
e.stopPropagation()
setCardHoverInputState(true)
}}
onBlurCapture={e => {
e.stopPropagation()
console.log(e.relatedTarget.className)
if (e.relatedTarget.className !== 'addBtn') {
setCardHoverInputState(false)
}
}}
value={inputText.value}
maxLength={20}
onKeyPress={onKeyPress}
/>
<button className="addBtn" onClick={addDirHandler}>
์ ์ฅ
</button>
</ButtonWrap>
ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ์ผ์ด๋ ์ปดํฌ๋ํธ์ className์ด โaddBtnโ์ด ์๋ ๋ ์ ์ฅ ๋ฒํผ์ด ๋๋ฆฌ์ง ์์์ ๋๋ง ์นด๋ ์์ ๋ ์๋ ํ๋ฉด์ ์ฌ๋ผ์ง๋๋ก ๊ตฌ์ฑํ ๊ฒ์ด๋ค. ์ด๋ ๊ฒ ์คํ์ํค์ ์๋ฌ๊ฐ ๋ฌ๋คโฆ๐ ๊ทธ ์ด์ ๋ ์ฌ์ฉ์๊ฐ ํด๋ฆญํ ๊ณณ์ด null๋ก ์ฐํ๋ ๊ฒฝ์ฐ๊ฐ ์์๊ธฐ ๋๋ฌธ์ด๋ค. null์ ํด๋์ค ์ด๋ฆ์ ๊ฐ์ ธ์ฌ ์ ์๊ธฐ ๋๋ฌธ์ error๊ฐ ๋ ๊ฒ์ด๋ค.
์ด๋ป๊ฒ ํด๊ฒฐํ ๊น ๊ณ ๋ฏผํ๋ค๊ฐ ์ต์ ๋ ์ฒด์ด๋์ด ๋ ์ฌ๋๋ค.
?.์ ?.โ์โ์ ํ๊ฐ ๋์์ด undefined๋ null์ด๋ฉด ํ๊ฐ๋ฅผ ๋ฉ์ถ๊ณ undefined๋ฅผ ๋ฐํํ๋ค.
์ ๋ฒ ์ต์ ๋ ์ฒด์ด๋ ํฌ์คํ ์์ ๊ฐ์ ธ์จ ๋ฌธ์ฅ์ด๋ค. ์ต์ ๋์ฒด์ด๋์์ ?.์์ ํ๊ฐ๋์์ด null์ด๋ฉด undefined๋ฅผ ๋ฐํํ๊ณ ๋๋๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๊ฐ ๋์ง ์๋๋ค.
e.relatedTarget.className
์ e?.relatedTarget?.className
๋ก ์์ ํด์ฃผ๋ฉด ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๊ณณ์ด null๋ก ์ฐํ๋ className์ ๋ถ๋ฌ์ค์ง ์๊ณ undefined๋ฅผ ๋ฐํํ๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๋ฅผ ํผํ ์ ์๋ ๊ฒ์ด๋ค.
์ด๋ฅผ ์ ์ฉํ์ฌ ์ฝ๋๋ฅผ ์์ ํด๋ณด์๋ค.
<ButtonWrap isShow={isShow} inputChange={inputChange}>
<input
className="addInput"
placeholder="์ ๋๋ ํ ๋ฆฌ ๋ช
์ ์
๋ ฅํ์ธ์"
onChange={e => {
inputText.onChange(e)
setInputChange(true)
}}
onFocus={e => {
e.stopPropagation()
setCardHoverInputState(true)
}}
onBlurCapture={e => {
e.stopPropagation()
console.log(e?.relatedTarget?.className)
if (e?.relatedTarget?.className !== 'addBtn') {
setCardHoverInputState(false)
}
}}
value={inputText.value}
maxLength={20}
onKeyPress={onKeyPress}
/>
<button className="addBtn" onClick={addDirHandler}>
์ ์ฅ
</button>
</ButtonWrap>
console ์ถ๋ ฅ๊ฒฐ๊ณผ
์ต์ ๋ ์ฒด์ด๋์ ๊ฒฐ๊ณผ๋ก undefined๋ฅผ ๋ฐํํ ๊ฒ์ ํ์ธํ ์ ์์๋ค!
์ฌ์ค ์ต์ ๋์ฒด์ด๋ ํฌ์คํ ์ ํ๋ฉด์ ์๋ฒ์์ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์์ค๋ ๊ฒ ์ด์ธ์ ๋ค๋ฅธ ์์๋ ์ฐพ์๋ณด๊ธฐ ํ๋ค์ด์ ํ์ฉ์ ๊ฑฐ์ ๋ชปํ๊ณ ์์๋๋ฐ, ์ด๋ฐ ์์ผ๋ก ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ ์ ์๋ ๊ฐ๋ ์ด๋ผ๋ ๊ฑธ ๋๊ผ๋ค.
์ต์
๋ ์ฒด์ด๋์ ๋ชฐ๋๋ค๋ฉด ? :
๋ &&
if{...}else{...}
๋ฅผ ํ์ฉํด์ผ ํ์ํ
๋ฐ ๊ทธ๊ฒ๋ณด๋ค ํจ์ฌ ๊ฐ๊ฒฐํ ?.
์ผ๋ก ํด๊ฒฐํด์ ์ฝ๋๊ฐ ๋ ๊น๋ํด์ง ๊ฒ ๊ฐ๋ค!